<template>
  <section class="passenger clearfix">
    <div class="left">
      <panel class="left-item item-title1" title="违法犯罪人员">
        <div class="item sectionbg">
          <div class="select-wrapper">
            <div class="radios">
              <el-radio-group v-model="radios.leftTopData">
                <el-radio label="week">近7天</el-radio>
                <el-radio label="month">近30天</el-radio>
                <el-radio label="year">本年</el-radio>
              </el-radio-group>
            </div>
            <div class="selects">
              <span>筛选：</span>
              <el-select v-model="selected.leftTop" clearable ref="mySelect1" placeholder="请选择">
                <el-option
                  v-for="item in selectes.leftTop"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <left-top chartId='left-top' :options="option"></left-top>
        </div>
      </panel>
      <panel class="left-item item-center item-title2" title="行政案件数">
        <div class="item sectionbg">
          <div class="select-wrapper">
            <div class="radios">
              <el-radio-group v-model="radios.leftCenterData">
                <el-radio label="week">近7天</el-radio>
                <el-radio label="month">近30天</el-radio>
                <el-radio label="year">本年</el-radio>
              </el-radio-group>
            </div>
            <div class="selects">
              <span>筛选：</span>
              <el-select v-model="selected.leftCenter" clearable ref="mySelect2" placeholder="请选择">
                <el-option
                  v-for="item in selectes.leftCenter"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>  
          <left-center chartId='left-center' :options="option"></left-center>
        </div>
      </panel>
      <panel class="left-item item-title3" title="刑事案件数">
        <div class="item sectionbg">
          <div class="select-wrapper">
            <div class="radios">
              <el-radio-group v-model="radios.leftBottomData">
                <el-radio label="week">近7天</el-radio>
                <el-radio label="month">近30天</el-radio>
                <el-radio label="year">本年</el-radio>
              </el-radio-group>
            </div>
            <div class="selects">
              <span>筛选：</span>
              <el-select v-model="selected.leftBottom" clearable ref="mySelect3" placeholder="请选择">
                <el-option
                  v-for="item in selectes.leftBottom"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>  
          <left-bottom chartId='left-bottom' :options="option"></left-bottom>
        </div>
      </panel>
    </div>
    <div class="center">
      <panel class="warning item-title4" title="布控预警统计">
        <div class="warning-item sectionbg">
          <div class="select-wrapper">
            <div class="radios">
              <el-radio-group v-model="radios.centerTopData">
                <el-radio label="day">本日</el-radio>
                <el-radio label="week">近7天</el-radio>
                <el-radio label="month">近30天</el-radio>
              </el-radio-group>
            </div>
            <div class="selects">
              <span>筛选：</span>
              <el-select v-model="selected.centerTop" clearable ref="mySelect4" placeholder="请选择">
                <el-option
                  v-for="item in selectes.centerTop"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <centerTop chartId="centerTop" :options="waringData[radios.centerTopData][selectVal(selected.centerTop)]"></centerTop>
          <div class="line-wrapper">
            <centerLine chartId="centerLine1" :options="waringCountData[radios.centerTopData][selectVal(selected.centerTop)]" title="重点人员"></centerLine>
            <centerLine chartId="centerLine2" :options="waringCountData[radios.centerTopData][selectVal(selected.centerTop)]" title="网上逃犯"></centerLine>
          </div>
        </div>
      </panel>
      <panel class="passengeritem center-bottom item-title5" title="客流统计">
        <div class="center-bottom-item sectionbg">
          <div class="radios">
            <el-radio-group v-model="radios.centerLeftData">
              <el-radio label="day">本日</el-radio>
              <el-radio label="week">近7天</el-radio>
              <el-radio label="month">近30天</el-radio>
            </el-radio-group>
          </div>
          <centerBottomLeft chartId="cen-BottomLeft" :options="option"></centerBottomLeft>
        </div>
      </panel>
      <panel class="center-bottom item-title6" title="接处警统计">
        <div class="center-bottom-item sectionbg">
          <div class="radios">
            <el-radio-group v-model="radios.centerRightData">
              <el-radio label="day">本日</el-radio>
              <el-radio label="week">近7天</el-radio>
              <el-radio label="month">近30天</el-radio>
            </el-radio-group>
          </div>
          <centerBottomRight chartId="cen-BottomRight" :options="option"></centerBottomRight>          
        </div>
      </panel>
    </div>
    <div class="right">
      <panel class="resource item-title7" title="数据资源统计">
        <res-table :tableDatas='resoureList'></res-table>
      </panel>
    </div>
  </section>
</template>

<script>
import { getTableApi } from '../api/api'
import { dataHandle,dataHandle2 } from '../util/tool.js'
import Panel from '../components/panal'
import leftTop from '../components/passenger/left/left-top'
import leftCenter from '../components/passenger/left/left-center'
import leftBottom from '../components/passenger/left/left-bottom'
import centerBottomLeft from '../components/passenger/center/center-bottomleft'
import centerBottomRight from '../components/passenger/center/center-bottomright'
import centerTop from '../components/passenger/center/center-top'
import centerLine from '../components/passenger/center/center-topline'
import resTable from '../components/passenger/right/resource'
import { mockData } from './util/passengerData.js'
export default {
  components : {
    Panel,
    leftTop,
    leftCenter,
    leftBottom,
    centerTop,
    centerLine,
    centerBottomLeft,
    centerBottomRight,
    resTable
  },
  props:{
    sOff:{
      type: Boolean
    }
  },
  data() {
    return {
      radios: mockData.radios,
      selectes: mockData.selectes,
      selected: mockData.selected,
      waringData: mockData.waringData,
      waringCountData: mockData.waringCountData,
      option:{},
      resoureList: [],
    }
  },
  created() {
    let _this = this;
    // 数据资源统计
    this.getResoureList('sjzy');
    // 布控预警统计
    this.getWarning('bkyj',this.waringData);
    // 布控预警状态统计
    this.getWarningCount('bkyjzt',this.waringCountData);
  },
  watch: {
    sOff: function(val){
      // console.log(val)
      if(val){
        for(let i in this.$refs){
          this.$refs[i].blur();
        }
      }
    }
  },
  methods: {
    // select下拉选项
    selectLi(data,sdata){
      for(let i in sdata){
        if(i != 'all'){
          data.push({ value:i,label:i });
        }
      }
    },
    // 判断select是否为全选
    selectVal(val){
      let value = val;
      if(value == ''){
        value = 'all';
      }
      return value;
    },
    // 数据资源统计
    getResoureList(tableName){
      getTableApi(tableName).then((res) =>{
        this.resoureList = res.data.data.count;
      });
    },
    // 布控预警统计
    getWarning(tableName,data){
      getTableApi(tableName).then((res) =>{
        let resdata = dataHandle(res.data.data);
        let jname , xname ;
        data.month = {};
        data.week = {};
        data.day = {};
        this.selectLi(this.selectes.centerTop = [],resdata.week_charts);

        for(let j in resdata){
          for(let i in resdata[j]){
            if(j == 'day_charts'){
              jname = 'day';
              xname = '(时间/小时)';
            }
            if(j == 'week_charts'){
              jname = 'week';
              xname = '(时间/天)';
            }
            if(j == 'month_charts'){
              jname = 'month';
              xname = '(时间/天)';
            }
            resdata[j][i].forEach((elem) => {
              if(data[jname][i] == undefined){
                data[jname][i] = { xName: xname,xData:[],line1:[],line2:[]  }; 
              }
              data[jname][i].xData.push(elem.k2);
              data[jname][i].line1.push(elem.v1);
              data[jname][i].line2.push(elem.v2);
            })
          }
        }
        for(let i in data.day){
          data.day[i].xData.sort();
        }
      });
    },
    // 布控预警状态统计
    getWarningCount(tableName,data){
      getTableApi(tableName).then((res) =>{
        let resdata = dataHandle2(res.data.data);
        let jname ;
        data.month = {};
        data.week = {};
        data.day = {};

        for(let j in resdata){
          for(let i in resdata[j]){
            if(j == 'day_charts'){
              jname = 'day';
            }
            if(j == 'week_charts'){
              jname = 'week';
            }
            if(j == 'month_charts'){
              jname = 'month';
            }
            resdata[j][i].forEach((elem) => {
              if(data[jname][i] == undefined){
                data[jname][i] = { ldata:[] , rdata:[] }; 
              }
              if(elem.k2 == '在逃人员'){
                data[jname][i].rdata.push(elem.v1);
                data[jname][i].rdata.push(elem.v2);
                data[jname][i].rdata.push(elem.v3);
              }
              if(elem.k2 == '重点人员'){
                data[jname][i].ldata.push(elem.v1);
                data[jname][i].ldata.push(elem.v2);
                data[jname][i].ldata.push(elem.v3);
              }
            })
          }
        }
        // console.log(data,resdata);
      });
    }
  }
}
</script>

<style lang="scss">
@import '../assets/sass/common.scss';
@import '../assets/sass/background.scss';
@import '../assets/sass/passengerPage.scss';
</style>